import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import Image from 'react-uwp/Image';
import LinkTitle from './common/LinkTitle';
import Order from '../containers/user/Order';
import { ACTIONSTATE } from '../utils/constant';
export default class User extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { getOrderInfo, datasource, orderInfo } = this.props;
    if (!datasource) {
      getOrderInfo();
    } else {
      orderInfo();
    }
  }
  renderItem(item, index) {
    return (
      <li
        className="item"
        key={index}
        onClick={() => {
          this.pushState(item);
        }}
      >
        <div className="iconWrapper">
          <i className={`iconfont ${item.icon}`} />
        </div>
        <div style={{ marginTop: '0.8rem' }}>
          <span>{item.title}</span>
          <span className="cred2">{item.num}</span>{' '}
        </div>
      </li>
    );
  }
  renderRightItem(item, index) {
    return (
      <li
        className="rItem"
        key={index}
        onClick={() => {
          this.pushState(item);
        }}
      >
        <span style={{ display: 'inline-block', minWidth: '2.4rem' }}>
          {item.title}
        </span>
        <span style={{ marginLeft: '1.4rem' }}>
          <span className="cred2">{item.num ? item.num : 0}</span>
          <span>{item.unit}</span>
        </span>
      </li>
    );
  }
  pushState(item) {
    const { history } = this.props;
    const { href, state } = item;
    history.push(href, { state });
  }
  render() {
    const {
      userInfo,
      unpay,
      unTravel,
      unComment,
      coupons,
      points,
      list
    } = this.props;
    const centerList = [
      {
        title: '全部订单',
        num: '',
        href: '/user/order',
        state: 'all',
        icon: 'icon-order'
      },
      {
        title: `待支付`,
        num: unpay,
        href: '/user/order',
        state: ACTIONSTATE[0].type,
        icon: 'icon-wallet'
      },
      {
        title: `待出行`,
        num: unTravel,
        href: '/user/order',
        state: ACTIONSTATE[3].type,
        icon: 'icon-travel'
      },
      {
        title: `待评论`,
        num: unComment,
        href: '/user/order',
        state: ACTIONSTATE[1].type,
        icon: 'icon-msg'
      }
    ];
    const rightList = [
      {
        title: '优惠券:',
        num: coupons,
        href: '/user/coupon',
        state: 'unuse',
        unit: '张'
      },
      {
        title: '我的积分:',
        num: points,
        href: '/user/point',
        state: 'unuse',
        unit: '分'
      }
    ];

    return (
      <div className="dfc center">
        <div className="top">
          <div className="dfrc">
            <div className="avatar">
              <Image src={userInfo.avatar} className="imgCover" />
            </div>
            <div className="dfc ml10">
              <span>{userInfo.nickname}</span>
              <Link className="aNormal" to="/user/info">
                更改信息
              </Link>
            </div>
          </div>
          <ul className="topC">
            {centerList.map((item, index) => this.renderItem(item, index))}
          </ul>
          <ul>
            {rightList.map((item, index) => this.renderRightItem(item, index))}
          </ul>
        </div>
        <div className="userCWrapper" style={{ marginTop: '0.96rem' }}>
          <div className="ltWrapper">
            <LinkTitle title="最近订单" />
            <Link to="/user/order" state={{ state: 'all' }}>
              查看全部订单
            </Link>
          </div>
          <Order pagination={false} list={list} />
        </div>
      </div>
    );
  }
}
